<!-- 供应商管理-供应商初选列表-新增供应商 -->
<template>
  <div class="supplier-add">
    <pageHeader :title="title" :breadCrumb="breadCrumb" :show-back="true">
      <template #footer>
        <a-button type="primary" @click="save">提交</a-button>
        <a-button
          :style="{
            margin: '0px 20px',
          }"
          @click="cancel"
          >取消</a-button
        >
      </template>
      <!-- <div v-if="form.list.state === 4 || form.list.state === 5">
        <div>
          <div
            style="
              padding: 30px 60px 40px 20px;
              border-bottom: 1px solid var(--color-text-4);
            "
          >
            <a-space :size="30" direction="vertical" fill>
              <div>
                审核状态：
                <a-radio-group
                  disabled
                  size="large"
                  v-model="form.list.state"
                  @change="ChangeProcess"
                >
                  <a-radio
                    :value="4"
                    :style="{
                      marginRight: '20px',
                    }"
                  >
                    <template #radio="{ checked }">
                      <div
                        :style="{
                          display: 'flex',
                          width: '135px',
                        }"
                        :class="checked ? 'checked-radio' : 'unchecked-radio'"
                      >
                        <div
                          :style="{
                            width: '35px',
                            textAlign: 'center',
                          }"
                          :class="
                            checked
                              ? 'radio-icon-box-checked'
                              : 'radio-icon-box-unchecked'
                          "
                        >
                          <icon-check-circle
                            :class="
                              checked
                                ? 'radio-icon-checked'
                                : 'radio-icon-unchecked'
                            "
                            class="radio-icon"
                            size="20px"
                          />
                        </div>
                        <div
                          :style="{
                            width: '100px',
                            textAlign: 'center',
                          }"
                        >
                          同意
                        </div>
                      </div>
                    </template>
                  </a-radio>
                  <a-radio :value="5">
                    <template #radio="{ checked }">
                      <div
                        :style="{
                          display: 'flex',
                          width: '135px',
                        }"
                        :class="
                          checked ? 'checked-radio-no' : 'unchecked-radio'
                        "
                      >
                        <div
                          :style="{
                            width: '35px',
                            textAlign: 'center',
                          }"
                          :class="
                            checked
                              ? 'radio-icon-box-checked-no'
                              : 'radio-icon-box-unchecked'
                          "
                        >
                          <icon-check-circle
                            :class="
                              checked
                                ? 'radio-icon-checked-no'
                                : 'radio-icon-unchecked'
                            "
                            class="radio-icon"
                            size="20px"
                          />
                        </div>
                        <div
                          :style="{
                            width: '100px',
                            textAlign: 'center',
                          }"
                        >
                          不同意
                        </div>
                      </div>
                    </template>
                  </a-radio>
                </a-radio-group>
              </div>
              <div v-if="processMsg === 1">
                <a-space>
                  供应商等级：
                  <a-input
                    v-model="supLevelName"
                    disabled
                    style="width: 200px"
                  ></a-input>
                </a-space>
              </div>

              <div>
                <a-space>
                  审核意见：
                  <a-textarea v-model="form.list.auditView" allow-clear />
                </a-space>
              </div>
            </a-space>
          </div>
        </div>
      </div> -->

      <div>
        <div class="base-info">
          <TitleBox title="基本信息"></TitleBox>
          <a-image
            width="80"
            height="80"
            class="avatar"
            :src="headFile[0].fileUrl"
          />
          <div class="base-info-header">
            <a-form
              auto-label-width
              :model="form.list"
              :rules="rules"
              layout="vertical"
            >
              <a-form-item field="name" label="供应商名称：">
                <a-input
                  placeholder="请输入供应商名称"
                  :style="{
                    width: '100%',
                  }"
                  :disabled="type !== 'add' && type !== 'edit'"
                  v-model="form.list.name"
                  size="large"
                />
              </a-form-item>
            </a-form>
            <a-form :model="form.list" :rules="rules" auto-label-width>
              <a-row :gutter="16">
                <a-col :span="12">
                  <a-form-item field="number" label="供应商编号：">
                    <a-input
                      placeholder="请输入供应商编号"
                      size="large"
                      v-model="form.list.number"
                      :disabled="type !== 'add' && type !== 'edit'"
                    />
                  </a-form-item>
                </a-col>
                <a-col :span="12">
                  <a-form-item field="level" label="供应商级别：">
                    <a-input
                      v-model="form.list.supLevelName"
                      disabled
                    ></a-input>
                  </a-form-item>
                </a-col>
              </a-row>

              <a-row :gutter="16">
                <a-col :span="12">
                  <a-form-item field="supPhone" label="联系电话：">
                    <a-input
                      placeholder="请输入联系电话"
                      size="large"
                      :disabled="type !== 'add' && type !== 'edit'"
                      v-model="form.list.supPhone"
                    />
                  </a-form-item>
                </a-col>
                <a-col :span="12">
                  <a-form-item field="detailedAddress" label="联系地址：">
                    <a-input
                      class="address"
                      placeholder="请输入联系地址"
                      size="large"
                      v-model="form.list.detailedAddress"
                      :disabled="type !== 'add' && type !== 'edit'"
                    />
                  </a-form-item>
                </a-col>
              </a-row>

              <a-row :gutter="16">
                <a-col :span="12">
                  <a-form-item field="province" label="省市区：">
                    <a-input
                      placeholder="请输入省市区"
                      size="large"
                      :disabled="type !== 'add' && type !== 'edit'"
                      v-model="form.list.province"
                    />
                  </a-form-item>
                </a-col>
                <a-col :span="12">
                  <a-form-item field="supEmail" label="联系邮箱：">
                    <a-input
                      placeholder="请输入联系邮箱"
                      size="large"
                      :disabled="type !== 'add' && type !== 'edit'"
                      v-model="form.list.supEmail"
                    />
                  </a-form-item>
                </a-col>
              </a-row>

              <a-row :gutter="16">
                <a-col :span="12">
                  <a-form-item field="supCategoryId" label="供应商类别：">
                    <a-select
                      placeholder="请选择供应商类别"
                      v-model="form.list.supCategoryId"
                      :disabled="type !== 'add' && type !== 'edit'"
                      @change="selectCategory"
                    >
                      <a-option
                        v-for="item in categoryList"
                        :key="item.id"
                        :label="item.details"
                        :value="item.id"
                      ></a-option>
                    </a-select>
                  </a-form-item>
                </a-col>
                <a-col :span="12">
                  <a-form-item
                    field="supCommodityCategory"
                    label="供应商商品类别："
                  >
                    <a-select
                      placeholder="供应商商品类别"
                      v-model="form.list.supCommodityCategory"
                      :disabled="type !== 'add' && type !== 'edit'"
                      multiple
                    >
                      <a-option
                        v-for="item in subCategoryList.list"
                        :key="item.id"
                        :label="item.details"
                        :value="item.details"
                      ></a-option>
                    </a-select>
                  </a-form-item>
                </a-col>
              </a-row>

              <a-row :gutter="16">
                <a-col :span="12">
                  <a-form-item
                    field="supPerformanceRatingId"
                    label="供应商绩效评级："
                  >
                    <a-select
                      placeholder="请选择供应商绩效评级："
                      v-model="form.list.supPerformanceRatingId"
                      :disabled="type !== 'add' && type !== 'edit'"
                    >
                      <a-option
                        v-for="item in rateList.list"
                        :key="item.id"
                        :label="item.name"
                        :value="item.id"
                      ></a-option>
                    </a-select>
                  </a-form-item>
                </a-col>
                <a-col :span="12">
                  <a-form-item field="industry" label="供应商领域：">
                    <a-input
                      placeholder="请输入领域名称"
                      size="large"
                      v-model="form.list.industry"
                      :disabled="type !== 'add' && type !== 'edit'"
                    />
                  </a-form-item>
                </a-col>
              </a-row>
            </a-form>
            <a-form
              :model="form.list"
              layout="vertical"
              class="serve-table"
              auto-label-width
            >
              <div
                :style="{
                  border: '1px solid #f5f5f5',
                }"
              >
                <a-form-item field="name" label="可提供的产品：">
                  <a-table
                    bordered
                    stripe
                    :style="{
                      width: '100%',
                    }"
                    :data="form.list.product"
                    :pagination="false"
                  >
                    <template #columns>
                      <a-table-column :width="80" align="center">
                        <template #title> 序号 </template>
                        <template #cell="{ rowIndex }">
                          {{ rowIndex + 1 }}
                        </template>
                      </a-table-column>
                      <a-table-column title="产品明细">
                        <a-table-column
                          title="物料类型"
                          data-index="materialName"
                          align="center"
                          :width="100"
                        >
                        </a-table-column>
                        <a-table-column
                          title="物料编码"
                          data-index="number"
                          align="center"
                          :width="100"
                        >
                        </a-table-column>
                        <a-table-column
                          title="物料名称"
                          data-index="name"
                          align="center"
                          :width="100"
                        >
                        </a-table-column>
                        <a-table-column
                          title="规格型号"
                          data-index="spec"
                          align="center"
                          :width="100"
                        >
                        </a-table-column>
                        <a-table-column
                          title="物料是否认证"
                          data-index="number"
                          align="center"
                          :width="100"
                        >
                          <template #cell="{ record }">
                            <div>
                              <a-radio-group
                                disabled
                                v-model="record.authState"
                              >
                                <a-radio :value="1"> 需要认证</a-radio>
                                <a-radio :value="4">无需认证 </a-radio>
                              </a-radio-group>
                            </div>
                          </template>
                        </a-table-column>

                        <a-table-column
                          align="center"
                          :width="150"
                          fixed="right"
                          title="操作"
                        >
                          <template #cell="{ record, rowIndex }">
                            <a-popconfirm
                              @ok="deleteItem(record.id, rowIndex)"
                              content="确定删除吗"
                              type="error"
                            >
                              <a-button
                                :disabled="form.list.state !== 1"
                                type="text"
                                :style="{
                                  color: 'red',
                                }"
                                >删除</a-button
                              >
                            </a-popconfirm>
                          </template>
                        </a-table-column>
                      </a-table-column>
                    </template>
                  </a-table>
                </a-form-item>
              </div>
            </a-form>
          </div>
          <TitleBox title="联系人信息"></TitleBox>
          <div class="base-info-extra">
            <div class="contact-info">
              <a-form :model="form.list" :rules="rules" auto-label-width>
                <a-row :gutter="16">
                  <a-col :span="12">
                    <a-form-item field="contactName" label="联系人姓名：">
                      <a-input
                        placeholder="请输入联系人姓名"
                        size="large"
                        v-model="form.list.contactMan[0].name"
                        :disabled="type !== 'add'"
                      />
                    </a-form-item>
                  </a-col>
                  <a-col :span="12">
                    <a-form-item field="contactPhone" label="联系人电话：">
                      <a-input
                        placeholder="请输入联系人电话"
                        size="large"
                        v-model="form.list.contactMan[0].phone"
                        :disabled="type !== 'add'"
                      />
                    </a-form-item>
                  </a-col>
                </a-row>
                <a-row :gutter="16">
                  <a-col :span="12">
                    <a-form-item field="contactPosition" label="联系人职位：">
                      <a-input
                        placeholder="请输入联系人职位"
                        size="large"
                        v-model="form.list.contactMan[0].job"
                        :disabled="type !== 'add'"
                      />
                    </a-form-item>
                  </a-col>
                  <a-col :span="12">
                    <a-form-item field="contactDepartment" label="联系人部门：">
                      <a-input
                        placeholder="请输入联系人部门"
                        size="large"
                        v-model="form.list.contactMan[0].department"
                        :disabled="type !== 'add'"
                      />
                    </a-form-item>
                  </a-col>
                </a-row>
              </a-form>
            </div>
          </div>

          <TitleBox title="客户账号信息"></TitleBox>
          <div class="base-info-extra">
            <div class="client-info">
              <a-row :gutter="16">
                <a-col :span="12">
                  <a-form-item field="accountName" label="账户名称：">
                    <a-input
                      placeholder="请输入账户名称"
                      size="large"
                      v-model="form.list.customerAccount[0].name"
                      :disabled="type !== 'add' && type !== 'edit'"
                    />
                  </a-form-item>
                </a-col>
                <a-col :span="12">
                  <a-form-item field="accountNumber" label="银行账号：">
                    <a-input
                      placeholder="请输入银行账号"
                      size="large"
                      v-model="form.list.customerAccount[0].account"
                      :disabled="type !== 'add' && type !== 'edit'"
                    />
                  </a-form-item>
                </a-col>
              </a-row>
              <a-row :gutter="16">
                <a-col :span="12">
                  <a-form-item field="accountCity" label="开户省市：">
                    <a-input
                      placeholder="请输入开户省市"
                      size="large"
                      v-model="form.list.customerAccount[0].bankOfProvince"
                      :disabled="type !== 'add' && type !== 'edit'"
                    />
                  </a-form-item>
                </a-col>
                <a-col :span="12">
                  <a-form-item field="accountBank" label="开户银行：">
                    <a-input
                      placeholder="请输入开户银行"
                      size="large"
                      v-model="form.list.customerAccount[0].bankOfDeposit"
                      :disabled="type !== 'add' && type !== 'edit'"
                    />
                  </a-form-item>
                </a-col>
              </a-row>
            </div>
          </div>

          <TitleBox title="备注信息"></TitleBox>
          <div class="base-info-extra">
            <div class="remarks-info">
              <a-row :gutter="16">
                <a-col :span="24">
                  <a-form-item>
                    <a-textarea
                      placeholder=""
                      show-word-limit
                      :max-length="300"
                      allow-clear
                      :auto-size="{
                        minRows: 5,
                      }"
                      v-model="form.list.description"
                      :disabled="type !== 'add' && type !== 'edit'"
                    />
                  </a-form-item>
                </a-col>
              </a-row>
            </div>
          </div>
          <Enterprise
            ref="enterpriseRef"
            :form="enterpriseForm"
            :isEdit="false"
            :type="type"
          ></Enterprise>
          <div>
            <a-space :size="20" direction="vertical" fill>
              <div>所需附件：</div>
              <UploadFile
                ref="FileRef"
                v-model:file-list="fileListAll"
                :limit="0"
                :isShowRemove="type === 'add' || type === 'edit'"
                :disabled="true"
              ></UploadFile>
            </a-space>
          </div>

          <TitleBox title="审核"></TitleBox>

          <div v-if="form.list.state === 2">
            <a-space :size="30" direction="vertical" fill>
              <div>
                审核状态：
                <a-radio-group size="large" v-model="processMsg">
                  <a-radio
                    :value="1"
                    :style="{
                      marginRight: '20px',
                    }"
                  >
                    <template #radio="{ checked }">
                      <div
                        :style="{
                          display: 'flex',
                          width: '135px',
                        }"
                        :class="checked ? 'checked-radio' : 'unchecked-radio'"
                      >
                        <div
                          :style="{
                            width: '35px',
                            textAlign: 'center',
                          }"
                          :class="
                            checked
                              ? 'radio-icon-box-checked'
                              : 'radio-icon-box-unchecked'
                          "
                        >
                          <icon-check-circle
                            :class="
                              checked
                                ? 'radio-icon-checked'
                                : 'radio-icon-unchecked'
                            "
                            class="radio-icon"
                            size="20px"
                          />
                        </div>
                        <div
                          :style="{
                            width: '100px',
                            textAlign: 'center',
                          }"
                        >
                          同意
                        </div>
                      </div>
                    </template>
                  </a-radio>
                  <a-radio :value="2">
                    <template #radio="{ checked }">
                      <div
                        :style="{
                          display: 'flex',
                          width: '135px',
                        }"
                        :class="
                          checked ? 'checked-radio-no' : 'unchecked-radio'
                        "
                      >
                        <div
                          :style="{
                            width: '35px',
                            textAlign: 'center',
                          }"
                          :class="
                            checked
                              ? 'radio-icon-box-checked-no'
                              : 'radio-icon-box-unchecked'
                          "
                        >
                          <icon-check-circle
                            :class="
                              checked
                                ? 'radio-icon-checked-no'
                                : 'radio-icon-unchecked'
                            "
                            class="radio-icon"
                            size="20px"
                          />
                        </div>
                        <div
                          :style="{
                            width: '100px',
                            textAlign: 'center',
                          }"
                        >
                          不同意
                        </div>
                      </div>
                    </template>
                  </a-radio>
                </a-radio-group>
              </div>
              <div v-if="processMsg === 1">
                <a-space>
                  供应商等级：
                  <a-input
                    v-model="form.list.supLevelName"
                    disabled
                    style="width: 200px"
                  ></a-input>
                </a-space>
              </div>
            </a-space>
          </div>
        </div>
      </div>
    </pageHeader>

    <AddProduct
      v-model:visible="modelVisible"
      @addSmpleDetails="addSmpleDetails"
    ></AddProduct>
    <AddAUNT
      v-model:visible="ModelVisible"
      @addProject="addProject"
      :supplierid="supplierId"
    ></AddAUNT>
  </div>
</template>

<script lang="ts" setup>
  import { reactive, ref, computed, watchEffect } from 'vue';
  import { useRouter, useRoute } from 'vue-router';
  import {
    GetSupplierTemplateDetail,
    PostSupplierPrimaryDetail,
    GetSupplierPrimaryDetail,
    putSupplierPrimaryDetail,
  } from '@/api/buy-management/supplier-management/supplier-primary-list';
  import {
    GetSupplierCategoryInfo,
    GetSupplierRateInfo,
    GetSupplierLevelInfo,
    GetSupplierTemplateDetailInfo,
    addSupplierauth,
  } from '@/api/buy-management/supplier-management/base-setting';
  import AddProduct from './add-product.vue';
  import AddAUNT from './add-autn/index.vue';

  const router = useRouter();
  const route = useRoute();
  const type = computed(() => route.query.type); // 判断是新增客户还是看客户的基本信息
  const supLevelId = ref(Number(route.query.supLevelId)); // 模板id
  const supplierId = computed(() => Number(route.query.supplierId)); // 供应商id
  const templateId = computed(() => Number(route.query.templateId)); // 供应商id
  const title: string = '供应商审核详情';
  const modelVisible = ref(false);
  const ModelVisible = ref(false);
  const isAuth = ref(false);
  const processMsg = ref();
  const checkedItem = ref();
  const uploadFileShow = ref(false);
  const FileRef = ref();

  const breadCrumb: string[] = [
    '采购管理',
    '供应商管理',
    '供应商审核列表',
    '供应商审核详情',
  ];
  let file = ref(); // 储存头像
  let headPortraitFormData = new FormData();
  const form = reactive<any>({
    list: {
      number: '', // 供应商编号编号
      name: '', // 供应商名称
      creditCode: '', // 信用代码
      supCategoryId: undefined, // 供应商类别id
      supCommodityCategory: [], // 供应商商品类别id
      supLevelId: 0, // 供应商级别id
      supPerformanceRatingId: '', // 供应商绩效评级id
      supPhone: '', // 供应商联系电话
      supEmail: '', // 供应商联系邮箱
      province: '', // 所属省市
      detailedAddress: '', // 详细地址
      createUserId: 1, // 创建人id
      description: '', // 备注信息
      templateId: 1, // 模板id
      state: 1, // 状态
      extend: '', // 拓展
      industry: '', // 行业
      contactMan: [
        {
          name: '',
          phone: '',
          department: '',
          job: '',
        },
      ],
      customerAccount: [
        {
          name: '',
          account: '',
          bankOfDeposit: '', // 开户银行
          bankOfProvince: '', // 开户省市
        },
      ],
      product: [],
      serve: [
        {
          name: '',
          des: '',
        },
      ],
      file: [],
      auditView: '',
    },
  });

  const annexArr = ref([]);

  let fileListAll = computed({
    get() {
      const newarr = annexArr.value.map((element) => {
        return {
          ...element,
          sourceAddr: element.addr,
          fileUrl: element.fileAddr,
          fileName: element.name,
        };
      });
      return newarr.length > 0 ? newarr : [];
    },
    set(val: any[]) {
      console.log(val);
    },
  });

  const enterpriseForm = ref({
    businessLicense: '', // 营业执照
    creditCode: '', // 统一社会信用代码
    enterpriseName: '', // 企业名称
    legalRepresentative: '', // 法定代表人
    registrationStatus: '', // 登记状态
    establishmentDate: undefined, // 成立日期
    registeredCapital: '', // 注册资本
    paidCapital: '', // 实缴资本
    approvalDate: undefined, // 核准日期
    organizationCode: '', // 组织机构代码
    businessNo: undefined, // 工商注册号
    taxpayerNo: undefined, // 纳税人号
    enterpriseType: '', // 企业类型
    operationTerm: '', // 营业期限
    taxpayerQualification: '', // 纳税人资质
    industrySector: '', // 所属行业
    localArea: '', // 所属地区
    registrationAuthority: '', // 登记机关
    personnelSize: '', // 人员规模
    insuredPeople: undefined, // 参保人数
    formerName: '', // 曾用名
    englishName: '', // 英文名
    enterpriseCode: '', // 进出口企业代码
    registeredAddress: '', // 注册地址
    mainBusiness: '', // 主要经营
    opinion: '', //审批意见
    file: [],
  });

  let enterpriseRef = ref(); // 储存enterprise的ref

  const rules = reactive({
    name: [{ required: true, message: '请输入供应商名称' }],
    number: [{ required: true, message: '请输入供应商编号' }],
    level: [{ required: true, message: '请选择供应商级别' }],
    supPhone: [{ required: true, message: '请输入联系电话' }],
    detailedAddress: [{ required: true, message: '请输入联系地址' }],
    province: [{ required: true, message: '请输入省市区' }],
  });

  const requiredList = reactive<any>({
    list: [],
  });

  let headFile = computed(() => {
    let msg = form.list.file?.filter((i) => i.supplierFileType === 1) || [];
    return msg.length > 0
      ? [{ fileUrl: msg[0].fileAddr, fileName: msg[0].name }]
      : [{ fileUrl: '', fileName: '' }];
  });

  let supLevelName = ref(''); // 储存级别名称

  // // 根据id获取对应模板数据,用于新增供应商
  // const getTemplate = async () => {
  //   try {
  //     const res = await Promise.all([
  //       GetSupplierTemplateDetail({
  //         id: supLevelId.value,
  //       }),
  //       GetSupplierLevelInfo(),
  //     ]);
  //     requiredList.list = res[0].design.form;
  //     form.list.templateId = res[0].id;
  //     // 1为true，2为false
  //     requiredList.list.forEach((item: any) => {
  //       item.required = item.required === 1 ? true : false;
  //     });

  //     // 获取级别id
  //     form.list.supLevelId = supLevelId.value;

  //     // 获取级别名称
  //     for (let i of res[1].data) {
  //       if (i.id === supLevelId.value) {
  //         supLevelName.value = i.name;
  //         break;
  //       }
  //     }
  //   } catch (err: unknown) {
  //   }
  // };

  // 获取详情数据
  const getDetail = async () => {
    try {
      const [primaryDetail, templateDetail, levelInfo] = await Promise.all([
        GetSupplierPrimaryDetail({ id: supplierId.value }),
        GetSupplierTemplateDetailInfo({ id: templateId.value }),
        GetSupplierLevelInfo(),
      ]);
      form.list = {
        ...primaryDetail,
        customerAccount: primaryDetail.customerAccount || [
          { name: '', account: '' },
        ],
        contactMan: primaryDetail.contactMan || [
          { name: '', account: '', phone: '', job: '' },
        ],
        product: primaryDetail.product || [],
      };

      form.list.file = form.list.file || [];
      enterpriseForm.value = JSON.parse(form.list.extend);
      const enterpriseFile =
        primaryDetail.file?.find((item) => item.supplierFileType === 2) || [];
      enterpriseForm.value.file[0] = {
        ...enterpriseFile,
      };

      primaryDetail.file?.forEach((item) => {
        if (item.supplierFileType === 3) {
          annexArr.value.push(item);
          form.list.file = form.list.file.filter(
            (item) => item.supplierFileType !== 3
          );
        }
      });

      requiredList.list = templateDetail.design.form?.map((item) => ({
        ...item,
        required: item.required === 1,
      }));

      form.list.supLevelId = supLevelId;

      isAuth.value = form.list.product?.every((i) => i.authState === 4);
      console.log(isAuth.value);

      const level =
        levelInfo.data?.find((item) => item.id === supLevelId.value) || [];
      supLevelName.value = level ? level.name : '';
    } catch (err) {
      console.log(err);
    }
  };

  watchEffect(() => {
    /* 如果是编辑或者详情就获取详细数据 */
    if (templateId.value) getDetail();
    // else getTemplate();
  });

  // 储存供应商类别数据
  const categoryList = ref<any>();

  // 储存供应商商品类别数据
  const subCategoryList = reactive<any>({
    list: [],
  });

  // 获取供应商类别数据
  const getSupplierCategoryInfo = async () => {
    try {
      const { data } = await GetSupplierCategoryInfo();
      categoryList.value = data;
    } catch (err: unknown) {
      console.log(err);
    }
  };
  getSupplierCategoryInfo();

  // 储存供应商级别数据
  const rateList = reactive<any>({
    list: [],
  });
  // 获取供应商绩效评级数据
  const getSupplierRateInfo = async () => {
    try {
      const { data } = await GetSupplierRateInfo();
      rateList.list = data;
    } catch (err: unknown) {
      console.log(err);
    }
  };
  getSupplierRateInfo();

  // 根据供应商类别id获取对应商品类别数据
  const selectCategory = (id: number) => {
    for (let i of categoryList.value.list) {
      if (i.id === id) {
        subCategoryList.list = i.child;
        break;
      }
    }
  };

  let isEdit = ref(false); // 判断用户是否点击编辑按钮
  const isEditBtn = () => {
    isEdit.value = !isEdit.value;
  };

  // 上传头像事件
  const onChange = (fileList: any, currentFile: any) => {
    file.value = {
      ...currentFile,
      url: URL.createObjectURL(currentFile.file),
    };
    headPortraitFormData.append('headPortrait', currentFile.file);
  };
  const onProgress = (currentFile: any) => {
    file.value = currentFile;
  };
  // 新增产品明细
  const addProduction = (index: number) => {
    const item = {
      number: '',
      name: '',
      model: '',
      spec: '',
      des: '',
      type: '',
    };
    form.list.product.splice(index + 1, 0, item);
  };

  // 新增产品明细
  const addServe = (index: number) => {
    const item = {
      name: '',
      des: '',
    };
    form.list.serve.splice(index + 1, 0, item);
  };

  // 取消按钮
  const cancel = () => {
    router.back();
  };

  const add = () => {
    modelVisible.value = true;
  };

  const Supplierproducts = ref();
  const addSmpleDetails = (titleData: any) => {
    Supplierproducts.value = titleData;
  };

  const deleteItem = (data: any, key: any) => {
    Supplierproducts.value.splice(key, 1);
  };
  const addautn = () => {
    ModelVisible.value = true;
  };

  const addProject = async (
    formData: any,
    date: any,
    content: any,
    userid?: any,
    key: number
  ) => {
    form.list.state = 4;
    if (annexArr.value.length) {
      form.list.file = form.list.file.concat(annexArr.value);
    }
    await addSupplierauth({
      id: formData.id,
      submitDemandTime: date,
      submitDemandUserId: userid,
      flowStr: `${content}`,
    });

    await putSupplierPrimaryDetail(form.list);
    router.back();
  };

  // 文件上传移除自定义事件
  const beforeRemove = () => {
    FileRef.value.refresh();
    form.list.file = form.list.file.filter((i) => i.supplierFileType !== 1);
  };

  // 保存按钮
  const save = async () => {
    try {
      if (processMsg.value === 2) {
        form.list.state = 5;
        form.list.creditCode =
          enterpriseRef.value.currForm.unifiedSocialCreditCodes;
        // form.list.supCommodityCategory =
        //   form.list.supCommodityCategory.join(',');
        if (annexArr.value.length) {
          form.list.file = form.list.file.concat(annexArr.value);
        }
        await putSupplierPrimaryDetail(form.list);
        router.back();
      } else if (processMsg.value === 1 && isAuth.value) {
        form.list.state = 6;
        form.list.creditCode =
          enterpriseRef.value.currForm.unifiedSocialCreditCodes;
        // form.list.supCommodityCategory =
        //   form.list.supCommodityCategory?.join(',');
        if (annexArr.value.length) {
          form.list.file = form.list.file.concat(annexArr.value);
        }
        await putSupplierPrimaryDetail(form.list);
        router.back();
      } else if (processMsg.value === 1 && !isAuth.value) {
        addautn();
      }
    } catch (error: unknown) {
      console.log(error);
    }
  };
</script>

<style scoped lang="less">
  .supplier-add {
    .base-info {
      padding: 10px 40px 10px 40px;
      .avatar {
        position: absolute;
        width: 100px;
      }
      &-header {
        padding: 0 100px;
        :deep(.arco-form-item-content-flex) {
          display: block;
          line-height: 32px;
          color: #cccccc29;
          z-index: 999;
        }
      }

      &-extra {
        .contact-info,
        .invoice-info,
        .client-info,
        .remarks-info {
          padding: 0 100px;
        }
      }
      :deep(.arco-input-wrapper .arco-input[disabled]),
      :deep(.arco-select-view-single.arco-select-view-disabled),
      :deep(.arco-select-view-multiple.arco-select-view-disabled
          .arco-select-view-tag) {
        // -webkit-text-fill-color: #165dff;
      }
    }
  }

  .custom-radio-card {
    padding: 10px 16px;
    border: 1px solid var(--color-border-2);
    border-radius: 4px;
    width: 150px;
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    height: 40px;
    line-height: 40px;
    display: flex;
  }

  .custom-radio-card-masky {
    height: 17px;
    width: 17px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 100%;
    border: 1px solid var(--color-border-2);
    box-sizing: border-box;
    margin-left: 30%;
  }

  .custom-radio-card-maskn {
    height: 17px;
    width: 17px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 100%;
    border: 1px solid var(--color-border-2);
    box-sizing: border-box;
    margin-left: 30%;
  }

  .custom-radio-card-mask-dot {
    width: 8px;
    height: 8px;
    border-radius: 100%;
  }

  .custom-radio-card-title {
    color: var(--color-text-1);
    font-size: 14px;
    font-weight: bold;
    margin-bottom: 8px;
  }
  .custom-radio-card-shade {
    width: 45px;
    height: 38px;
    border-right: 1px solid var(--color-border-2);
    background-color: white;
    box-sizing: border-box;
  }

  .custom-radio-card-shadey {
    width: 105px;
    height: 38px;
    background-color: white;
    box-sizing: border-box;
  }

  .custom-radio-card-shaden {
    width: 105px;
    height: 38px;
    background-color: white;
    box-sizing: border-box;
  }

  .custom-radio-card-checked .custom-radio-card-masky {
    border-color: rgb(49, 194, 124);
  }

  .custom-radio-card-checked .custom-radio-card-maskn {
    border-color: rgb(255, 153, 0);
  }

  .custom-radio-card-checked .custom-radio-card-shadey {
    // background-color: var(--color-primary-light-1);
    // ba-color: rgb(49, 194, 124);
    color: white;
    background-color: rgb(49, 194, 124);
  }
  .custom-radio-card-checked .custom-radio-card-shaden {
    // background-color: var(--color-primary-light-1);
    // ba-color: rgb(49, 194, 124);
    color: white;
    background-color: rgb(255, 153, 0);
  }

  .custom-radio-card:hover .custom-radio-card-title,
  .custom-radio-card-checked .custom-radio-card-title {
    color: rgb(var(--primary-6));
  }

  .custom-radio-card-checked .custom-radio-card-mask-dot {
    background-color: rgb(var(--primary-6));
  }

  .uploadFile {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: space-between;
    box-sizing: border-box;
    width: 20%;
    padding: 8px 10px 8px 12px;
    overflow: hidden;
    font-size: 14px;
    background-color: var(--color-fill-1);
    border-radius: var(--border-radius-small);
    transition: background-color 0.1s cubic-bezier(0, 0, 1, 1);
    margin-top: 10px;
    padding: 10px;
  }

  .box {
    padding-top: 10px;
    margin-top: 20px;
    border-top: 1px solid #e4e4e4;
    display: flex;
    justify-content: end;
    width: 100%;
  }

  .unchecked-radio {
    background-color: #fff;
    color: #dcdfe6;
    border: 1px solid #dcdfe6;
    font-weight: 700;
    font-size: 13px;
  }
  .checked-radio {
    background-color: rgb(49, 194, 124);
    color: #fff;
    border: 1px solid rgb(49, 194, 124);
    font-weight: 700;
    font-size: 13px;
  }

  .checked-radio-no {
    background-color: rgb(255, 0, 0);
    color: #fff;
    border: 1px solid rgb(255, 0, 0);
    font-weight: 700;
    font-size: 13px;
  }
  .radio-icon-box-checked {
    border: 1px solid rgb(49, 194, 124);
    background-color: #fff;
  }
  .radio-icon-box-checked-no {
    border: 1px solid rgb(255, 0, 0);
    background-color: #fff;
  }
  .radio-icon-box-unchecked {
    border: 1px solid rgba(220, 223, 230, 1);
  }
  .radio-icon-checked {
    color: rgb(49, 194, 124);
  }

  .radio-icon-checked-no {
    color: rgb(255, 0, 0);
  }

  .radio-icon-unchecked {
  }
  .radio-icon {
    position: relative;
    top: 3px;
  }

  .process-item {
    width: 102px;
    height: 32px;
    background: inherit;
    background-color: rgba(255, 255, 255, 1);
    box-sizing: border-box;
    border-width: 1px;
    border-style: solid;
    border-color: rgba(49, 194, 124, 1);
    border-radius: 3px;
    -moz-box-shadow: none;
    -webkit-box-shadow: none;
    box-shadow: none;
    font-size: 14px;
  }

  .uploadFile {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: space-between;
    box-sizing: border-box;
    width: 20%;
    padding: 8px 10px 8px 12px;
    overflow: hidden;
    font-size: 14px;
    background-color: var(--color-fill-1);
    border-radius: var(--border-radius-small);
    transition: background-color 1s cubic-bezier(0, 0, 1, 1);
  }
</style>
